// TaiChi.less
@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.taichi-container {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
  animation: rotate 10s linear infinite;
}

.taichi {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  background: #000;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);

  &::before,
  &::after {
    content: '';
    position: absolute;
    width: 50%;
    height: 50%;
    background: #fff;
    border-radius: 50%;
  }

  &::before {
    top: 25%;
    left: 25%;
    clip-path: circle(50% at 50% 50%);
  }

  &::after {
    bottom: 25%;
    right: 25%;
    clip-path: circle(50% at 50% 50%);
  }
}